<template>
  <div class="search-container">
    <el-input v-model="query" placeholder="请输入搜索内容" class="enhanced-search-input" @keyup.enter="handleSearch"
      :debounce="300">
      <template #append>
        <el-icon @click="handleSearch">
          <Search />
        </el-icon>
      </template>
    </el-input>

    <!-- 新增搜索结果展示 -->
    <div v-if="searchResults.length" class="search-results">
      <h4>搜索结果</h4>
      <div v-for="item in searchResults" :key="item.id" class="result-item" @click="handleResultSelect(item)">
        {{ item.title }}
      </div>
    </div>

    <!-- 历史搜索 -->
    <div v-if="historyList.length" class="history">
      <h4>历史搜索</h4>
      <el-tag v-for="(item, index) in historyList" :key="index" closable @close="removeHistory(item)"
        @click="selectHistory(item)">
        {{ item }}
      </el-tag>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";


import api from "@/api";

const query = ref(""); // 搜索关键词
const historyList = ref([]); // 历史搜索列表

const router = useRouter();

// 从 localStorage 加载历史搜索
onMounted(() => {
  const storedHistory = localStorage.getItem("searchHistory");
  if (storedHistory) {
    historyList.value = JSON.parse(storedHistory);
  }
});

// 搜索逻辑
const handleSearch = async () => {
  if (query.value.trim()) {
    saveHistory(query.value.trim());
    try {
      let res = await api.book.searchBook({ keyword: query.value.trim() });
      searchResults.value = res.data || [] // 假设接口返回数据在res.data中
    } catch (error) {
      ElMessage.error("搜索失败");
      searchResults.value = []
    }
  }
};


// 新增结果选择处理
const handleResultSelect = (item) => {
  router.push({
    path: '/book-detail',
    query: {
      id: item.id,
      title: item.title
    }
  })
};

// 保存历史记录
const saveHistory = (value) => {
  if (historyList.value.indexOf(value) === -1) {
    historyList.value.unshift(value);
    historyList.value = historyList.value.slice(0, 10); // 限制最多保存 10 条
    localStorage.setItem("searchHistory", JSON.stringify(historyList.value));
  }
};

// 删除历史记录
const removeHistory = (item) => {
  const index = historyList.value.indexOf(item);
  if (index !== -1) {
    historyList.value.splice(index, 1);
    localStorage.setItem("searchHistory", JSON.stringify(historyList.value));
  }
};

// 选择历史记录
const selectHistory = (item) => {
  query.value = item;
};
</script>

<style lang="scss" scoped>
.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f7f7f7;
  padding: 20px;

  .enhanced-search-input {
    width: 100%;
    max-width: 600px;
    height: 70px;
    border-radius: 35px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    font-size: 16px;

    @media (max-width: 768px) {
      width: 90%;
      max-width: 100%;
    }
  }

  .search-results {
    width: 100%;
    max-width: 600px;
    margin-top: 10px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;

    h4 {
      color: #666;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .result-item {
      padding: 8px;
      cursor: pointer;
      border-radius: 4px;
      transition: background 0.3s;

      &:hover {
        background: #f5f5f5;
      }
    }
  }

  .history {
    margin-top: 20px;
    width: 100%;
    max-width: 600px;

    h4 {
      font-size: 14px;
      margin-bottom: 5px;
    }

    .el-tag {
      margin-right: 5px;
      cursor: pointer;
    }
  }


  .search-results {
    width: 100%;
    max-width: 600px;
    margin-top: 10px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;

    h4 {
      color: #666;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .result-item {
      padding: 8px;
      cursor: pointer;
      border-radius: 4px;
      transition: background 0.3s;

      &:hover {
        background: #f5f5f5;
      }
    }
  }

  .history {
    margin-top: 20px;
    width: 100%;
    max-width: 600px;
  }

  @media (max-width: 768px) {
    background-color: #ffffff;
    background: url("@/assets/mbg.jpg") no-repeat center center;
    background-size: cover;
  }
}
</style>